<template>
    <div>
        app-{{ aa }}
        <button @click="handleClick">click</button>
        <Child v-if="show"></Child>
        <button @click="show=!show">销毁</button>
    </div>
</template>

<script>
import { nextTick, onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref, } from 'vue'
import Child from './生命周期-销毁.vue'
export default {
    components: {
        Child
    },
    setup() {
        const aa = ref('aaa')
        const show = ref(true)
        const handleClick = () => {
            aa.value = 'bbb'
            nextTick(() => {
                console.log('一次性监听器,执行比Updated晚');
            })
        }
        
        // 函数式编程,生命周期传入一个回调函数 ,同一生命周期可以设置多个
        onBeforeMount(() => {
            console.log('dom创建之前调用11111')
        })
        // onBeforeMount(() => {
        //     console.log('dom创建之前调用22222')
        // })
        onMounted(() => {
            console.log('dom创建之后调用 订阅,ajax,swiper,echart初始化')
        }) 
        onBeforeUpdate(() => {  //任意一个dom更新后都会调用
            console.log('dom更新之前调用')
        })
        onUpdated(() => {
            console.log('dom更新之后调用')
        })

        return {
            aa, handleClick, show
        }
    }
}
</script>